<script setup>
import RoleCreate from './role-create.vue';
import RoleView from './role-view.vue';
import {onMounted, reactive, toRefs} from "vue";
import {api} from "@jzl/api";
import {DFT_ICONS} from "@jzl/icons";
import {$WinDeptUsers} from "@jzl/comps-mg";

defineOptions({
  name: 'BasicRole'
})

const {
  showCreate,
  modId,
  winName,
  list,
  loading,
  pagination,

  rid,
  showAssociate,

  showView,
} = toRefs(reactive({
  showCreate: false,
  modId: null,
  winName: '新增',
  list: [],
  loading: false,
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0
  },

  rid: null,
  showAssociate: false,

  showView: false,
}))

onMounted(() => {
  refresh()
})

const refresh = async () => {
  let data = await api.role.getRoleList();
  list.value = data || [];
}

const closeWin = (flag) => {
  showCreate.value = false;
  showAssociate.value = false;
  showView.value = false;

  if (flag) {
    refresh()
  }
}

const showCreateWin = () => {
  showCreate.value = true;
  showView.value = false;
  modId.value = null;
  winName.value = '新增角色';
  // formRef.value.resetFields();
  /*form.value = {
    phone: '',
    passwd: '',
    teacher_name: '',
    real_name: '',
    teacher_introduction: '',
    curator_id: null
  };*/
}

const handleView = (it) => {
  rid.value = it.id;
  showAssociate.value = false;
  showCreate.value = false;
  showView.value = true;
}

const handleEdit = (it) => {
  modId.value = it.id;
  showCreate.value = true;
  showView.value = false;
}

const handleDisable = async (it) => {
  if (it && it.id) {
    let ret = await api.role.disableRole(it.id);

    if (ret) await refresh();
  }
}

const handleEnable = async (it) => {
  if (it && it.id) {
    let ret = await api.role.enableRole(it.id);

    if (ret) await refresh();
  }
}

const _delete = async (id) => {
  let ret = await api.role.removeRole(id);
  if (ret) await refresh();
}

const handleDelete = (it) => {

  if (!it || !it.id) return;

  $jui.confirm(`此操作将永久删除该角色【${it.name}】, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    _delete(it.id);
  }).catch(() => {
    $jui.toast({
      type: 'info',
      message: '已取消删除'
    });
  });
}

const handleAssociate = (it) => {
  rid.value = it.id;
  // showAssociate.value = true;

  $WinDeptUsers({
    winTitle: '选择用户',
    mode: 'USER',
    role: 'MGR',
    callback: null,
    onConfirm: async (data) => {
      let users = _.get(data, 'users');

      if (!users || !users.length) {
        $jui.toast('请先选择用户！');
        return;
      }

      loading.value = true;

      let uids = _.map(users, 'id');
      let ret = await api.role.associateUsers(rid.value, uids);

      loading.value = false;

      if (ret) {
        $jui.toast('操作成功！');
      }
    },
    onCancel: function () {}
  });
}
</script>

<template>
  <div
    class="jzlpage-container portal-detail-container datas-container"
    v-loading="loading">
    <div class="datas-search">
      <el-button
        size="mini"
        type="primary"
        class="mbtn"
        @click="showCreateWin()"
      >
        <JIcon :icon="DFT_ICONS.add"/>
        新增
      </el-button>
    </div>
    <div class="m-table-container">
      <el-table
        class="m-table"
        :data="list"
        border
        size="mini"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="角色名称">
          <template #default="scope">
            {{ scope.row.name }}
            <el-tag
              v-if="scope.row.type === 2"
              size="small"
              type="success"
              style="margin-left:5px;"
            >内置</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建人">
          <template #default="scope">
            {{ scope.row.admin ? scope.row.admin.nickname : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          align="center"
          width="180">
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          width="80"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.status === 2 ? '删除' : (scope.row.status === 3 ? '禁用' : '正常') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320" align="center">
          <template #default="scope">
            <div style="width:100%;text-align: left;">
              <el-button
                size="small"
                type="text"
                @click="handleView(scope.row, scope.$index)">详情
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="handleEdit(scope.row, scope.$index)">编辑
              </el-button>
              <el-button
                v-if="scope.row.code !== '_USER_ROLE'"
                size="small"
                type="text"
                @click="handleAssociate(scope.row, scope.$index)">绑定用户
              </el-button>
              <!--<el-button v-if="scope.row.code !== '_USER_ROLE' && scope.row.status == 2"
                  size="xmini"
                  type="text"
                  @click="handleEnable(scope.row, scope.$index)">启用</el-button>
              <el-button v-if="scope.row.code !== '_USER_ROLE' && scope.row.status == 0"
                  size="xmini"
                  type="text"
                  @click="handleDisable(scope.row, scope.$index)">禁用</el-button>-->
              <el-button
                v-if="scope.row.type !== 2"
                size="small"
                type="text"
                @click="handleDelete(scope.row, scope.$index)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="winName"
      v-model="showCreate"
      custom-class="j-common-win m-dialog-fullscreen"
      width="900px"
      :close-on-click-modal="false"
      :append-to-body="true">
      <RoleCreate
        @close="closeWin"
        :mod-id="modId"
        :show="showCreate"
      />
    </el-dialog>
    <!--<el-dialog title="分配用户" :visible.sync="showAssociate" top="60px" width="800px"
               :close-on-click-modal="false" :append-to-body="true">
        <c-associate @close="closeWin" :rid.sync="rid" :show.sync="showAssociate"></c-associate>
    </el-dialog>-->

    <el-dialog
      title="查看"
      v-model="showView"
      top="60px"
      width="900px"
      :append-to-body="true">
      <RoleView
        :rid.sync="rid"
        :show.sync="showView"
        @close="closeWin"
      />
    </el-dialog>
  </div>
</template>
